<script setup lang="ts">
import { ref } from 'vue'
import { timeStamp, timeFormat, regYuanToFen, toYuan } from '@/hooks/util'
import dayjs from 'dayjs'
import * as quotationRulesApi from '@/api/quotationRules'
import { message } from 'ant-design-vue'
import MarkList from './MarkList.vue'
import * as templateApi from '@/api/template'

const myModal = ref()

let groupId = ref<string>('')
const rowInfo = ref<any>()

// 编辑 - 开始 ---------------------------------------

// 处理院线
const editGetLine = (list: Array<any> = [], type: number): Array<any> => {
  return list
    .filter(item => item.containStatus == type)
    .map((item: any) => {
      return {
        label: item.name,
        value: item.code,
      }
    })
}
// 处理省份、城市
const editProLine = (list: Array<any> = [], type: number): Array<any> => {
  return list
    .filter(item => item.containStatus == type)
    .map((item: any) => {
      return {
        label: item.name,
        value: Number(item.code),
      }
    })
}
// 处理影厅
const editGetHall = (list: Array<any> = [], type: number): Array<any> => {
  let arr = list
    .filter(item => item.containStatus == type)
    .map(item => {
      return item.name
    })
  // console.log('arr=', arr)
  return arr
  // return arr.join(',')
}
// 处理座位数
const editSeatCount = (str: string) => {
  if (str != '0') {
    let list = str.split(',').map(item => {
      return `${item}张`
    })
    return list
  } else {
    return seatOption.value
  }
}

// 处理2/3D
const edit23D = (str: string) => {
  if (str != '0') {
    let list = str.split(',').map(item => {
      if (item == '1') {
        return '2D'
      } else if (item == '2') {
        return '3D'
      } else if (item == '3') {
        return '2/3D'
      }
    })
    return list
  } else {
    return seatOption_23D.value
  }
}

// 处理星期
const numberToStr = (num: any) => {
  const chineseWeekdays = {
    1: '周一',
    2: '周二',
    3: '周三',
    4: '周四',
    5: '周五',
    6: '周六',
    7: '周日',
  }
  // 检查输入的weekday是否在映射对象中
  if (chineseWeekdays.hasOwnProperty(num)) {
    return chineseWeekdays[num]
  } else {
    // 如果输入的weekday不在映射对象中，返回一个错误或默认值
    return '无效的星期几'
  }
}
const editWeek = (str: string) => {
  if (str != '0') {
    let list = str.split(',')
    return list.map(item => numberToStr(item))
  } else {
    return weekOption.value
  }
}

// 编辑 - 结束 ---------------------------------------

let theType = ref<number>(1)
const showModal = (id: string, record: any, type: number) => {
  theType.value = type // 微信：1，闲鱼：3

  groupId.value = id
  getCinemaLineList() // 院线列表
  getFilmList('') // 影片
  getProvince() // 省份列表 - 包含全国
  getProvinceNo() // 省份列表 - 不包含全国
  getCity() // 城市列表

  // 编辑 - 开始 ---------------------------------------
  rowInfo.value = record
  console.log('rowInfo=', rowInfo.value)
  if (Object.keys(rowInfo.value).length > 0) {
    title.value = '编辑报价规则'

    matchChannel.value = rowInfo.value.matchChannel
    alternativeChannel.value = rowInfo.value.slaveMatchChannel
    isFixedPrice.value = rowInfo.value.enableLimitPrice

    if (
      matchChannel.value == 3 ||
      matchChannel.value == 7 ||
      matchChannel.value == 8 ||
      matchChannel.value == 10
    ) {
      fixedPriceFlag.value = true
    } else {
      fixedPriceFlag.value = false
    }

    if (
      alternativeChannel.value == 3 ||
      alternativeChannel.value == 7 ||
      alternativeChannel.value == 8 ||
      alternativeChannel.value == 10
    ) {
      fixedPriceFlag_2.value = true
    } else {
      fixedPriceFlag_2.value = false
    }

    alternativeChannelList.value?.forEach(item => {
      item.able = false
      if (item.value == matchChannel.value) {
        item.able = true
      }
      // if (item.value == 7) {
      //   item.able = true
      // }
    })
    channelList.value?.forEach(item => {
      item.able = false
      if (item.value == alternativeChannel.value) {
        item.able = true
      }
      // if (item.value == 7) {
      //   item.able = true
      // }
    })

    formState.value.roleName = rowInfo.value.ruleName
    // 包含院
    okCinemaLine.value = editGetLine(rowInfo.value.lineList, 1)
    lineArr.value = editGetLine(rowInfo.value.lineList, 1)
    // 不包含院线
    okCinemaLineNo.value = editGetLine(rowInfo.value.lineList, 0)
    lineArrNo.value = editGetLine(rowInfo.value.lineList, 0)
    // 包含影厅
    formState.value.fileHall = editGetHall(rowInfo.value.filmHallList, 1)
    // console.log('fileHall=', formState.value.fileHall)
    // 不包含影厅
    formState.value.fileHallNo = editGetHall(rowInfo.value.filmHallList, 0)
    // console.log('fileHallNo=', formState.value.fileHallNo)
    // 包含影院
    formState.value.cinema = editGetHall(rowInfo.value.cinemaList, 1)
    // console.log('cinema=', formState.value.cinema)
    // 不包含影院
    formState.value.cinemaNo = editGetHall(rowInfo.value.cinemaList, 0)
    // console.log('cinemaNo=', formState.value.cinemaNo)
    // 包含影片
    fileArr.value = editGetLine(rowInfo.value.filmList, 1)
    okFile.value = editGetLine(rowInfo.value.filmList, 1)
    // 不包含影片
    fileArrNo.value = editGetLine(rowInfo.value.filmList, 0)
    okFileNo.value = editGetLine(rowInfo.value.filmList, 0)
    // 包含省份
    provinceArr.value = editGetLine(rowInfo.value.provinceList, 1)
    okProvince.value = editGetLine(rowInfo.value.provinceList, 1)
    // 不包含省份
    provinceArrNo.value = editGetLine(rowInfo.value.provinceList, 0)
    okProvinceNo.value = editGetLine(rowInfo.value.provinceList, 0)
    // 包含城市
    cityArr.value = editProLine(rowInfo.value.cityList, 1)
    okCity.value = editProLine(rowInfo.value.cityList, 1)
    // 不包含城市
    cityArrNo.value = editProLine(rowInfo.value.cityList, 0)
    okCityNo.value = editProLine(rowInfo.value.cityList, 0)
    // 原价区间
    formState.value.leftPrice = toYuan(rowInfo.value.marketPriceBegin)
    formState.value.rightPrice = toYuan(rowInfo.value.marketPriceEnd)
    // 座位数 - 非全部
    checkedList.value = editSeatCount(rowInfo.value.seatCount)

    // 2/3D
    // checkedList_23D.value = edit23D(rowInfo.value.customFilmType)

    // 2/3D - 新
    formState.value.type23D = editGetHall(rowInfo.value.planTypeList, 1)
    formState.value.type23DNo = editGetHall(rowInfo.value.planTypeList, 0)

    // 星期
    checkedWeekList.value = editWeek(rowInfo.value.week)
    // 开始时间
    formState.value.timeStart = rowInfo.value.beginTime
    formState.value.timeEnd = rowInfo.value.endTime

    // 单张限价
    if (Number(rowInfo.value.limitPrice) < 0) {
      // 小于0的时候，是加法
      formState.value.limitPrice = 0 - (toYuan(rowInfo.value.limitPrice) as any)
      limitAddSubIndex.value = 0
    } else {
      formState.value.limitPrice = toYuan(rowInfo.value.limitPrice) as any
      limitAddSubIndex.value = 1
    }

    // 是否启用
    // formState.value.ruleStatus = rowInfo.value.ruleStatus == 1 ? true : false
    // 影院精准匹配
    formState.value.cinemaNameType = rowInfo.value.cinemaNameType
    // 报价方式
    priceTypeIndex.value = rowInfo.value.quotationType
    ruleSubtrahend.value = toYuan(Math.abs(rowInfo.value.quotationDiscount)) as any
    ruleRate.value = rowInfo.value.quotationPercent
    // 报价调整类型
    formState.value.finalPriceAdjustType = rowInfo.value.finalPriceAdjustType

    // 判断加减
    if (rowInfo.value.quotationDiscount < 0) {
      okAddSubType(1)
    } else {
      okAddSubType(0)
    }

    // 处理日期 beginLimitTime为0，界面显示1970-01-01 的情况
    if (rowInfo.value.beginLimitTime == '0') {
      changeTime(null as any, ['', ''])
    } else {
      // 放映时间
      formState.value.showTime = [
        dayjs(timeFormat(rowInfo.value.beginLimitTime)),
        dayjs(timeFormat(rowInfo.value.endLimitTime)),
      ]
    }
    // 编辑 - 结束 ---------------------------------------
  } else {
    title.value = '新增报价规则**********'
    changeTime(null as any, ['', ''])

    matchChannel.value = 6
    alternativeChannel.value = 3

    alternativeChannelList.value?.forEach(item => {
      item.able = false
      if (item.value == matchChannel.value) {
        item.able = true
      }
      // if (item.value == 7) {
      //   item.able = true
      // }
    })
    channelList.value?.forEach(item => {
      item.able = false
      if (item.value == alternativeChannel.value) {
        item.able = true
      }
      // if (item.value == 7) {
      //   item.able = true
      // }
    })

    formRef.value.resetFields()
  }

  myModal.value?.showModal()
}

const handleCancel = () => {
  formState.value.fileHall = []
  formState.value.fileHallNo = []
  formState.value.cinema = []
  formState.value.cinemaNo = []
  formState.value.type23D = []
  formState.value.type23DNo = []

  okCinemaLine.value = []
  okCinemaLineNo.value = []
  okProvince.value = []
  okProvinceNo.value = []
  okCity.value = []
  okCityNo.value = []
  okFile.value = []
  okFileNo.value = []

  provinceArr.value = [{ label: '全国', value: '000000' }]
  provinceArrNo.value = []
  cityArr.value = []
  cityArrNo.value = []
  lineArr.value = []
  lineArrNo.value = []
  fileArr.value = []
  fileArrNo.value = []

  // ruleRate.value = ''
  ruleRate.value = 89

  // ruleSubtrahend.value = ''
  ruleSubtrahend.value = '0'

  // formState.value.limitPrice = ''
  formState.value.limitPrice = 0

  formState.value.roleName = ''

  formState.value.showTime = ['', '']

  matchChannel.value = 6
  alternativeChannel.value = 3

  alternativeChannelList.value?.forEach(item => {
    item.able = false
    if (item.value == matchChannel.value) {
      item.able = true
    }
  })
  channelList.value?.forEach(item => {
    item.able = false
    if (item.value == alternativeChannel.value) {
      item.able = true
    }
  })

  myModal.value.cancelModal()
}

const emit = defineEmits<{
  refresh: []
}>()

defineExpose({
  showModal,
})

let title = ref<string>('新增报价规则')

const formRef = ref()
const labelCol = {
  style: { width: '110px' },
}
interface FormState {
  roleName: string
  fileHall: Array<any> // 包含影厅
  fileHallNo: Array<any> // 不包含影厅
  cinema: Array<any> // 包含影院
  cinemaNo: Array<any> // 不包含影院
  showTime?: [any, any]
  leftPrice?: string
  rightPrice?: string
  timeStart?: string
  timeEnd?: string
  limitPrice?: string | number
  // ruleStatus?: boolean
  cinemaNameType?: number
  type23D: Array<any>
  type23DNo: Array<any>
  finalPriceAdjustType: string | number
  // alternativeChannel: string | number
  // matchChannel: number | string
  // isFixedPrice: number
}
const formState = ref<FormState>({
  roleName: '',
  fileHall: [],
  fileHallNo: [],
  cinema: [],
  cinemaNo: [],
  showTime: ['', ''],
  leftPrice: '0',
  rightPrice: '999',
  timeStart: '00:00:00',
  timeEnd: '23:59:59',
  cinemaNameType: 1,
  type23D: [],
  type23DNo: [],
  finalPriceAdjustType: 0,
  limitPrice: 0,
  // matchChannel: 0,
  // alternativeChannel: 0,
  // isFixedPrice: 1,
})

import type { Rule } from 'ant-design-vue/es/form'
let validateChangeBalance = async (rule: RuleObject, value: string) => {
  value = String(value)
  if (value == null || value.trim() === '') {
    return Promise.reject('金额不能为空')
  }

  if (Number(value) != 0) {
    // 使用正则表达式来验证金额格式，允许整数和小数点后两位
    const regex = /^\d+(\.\d{1,1})?$/
    if (!regex.test(value)) {
      return Promise.reject('请输入大于等于0的金额（整数或小数点后一位）')
    }
  } else {
    // 使用正则表达式来验证金额格式，允许整数和小数点后两位
    const regex = /^\d+(\.\d{0,2})?$/
    if (!regex.test(value)) {
      return Promise.reject('请输入大于等于0的金额')
    }
  }

  // 将字符串转换为数字并检查是否大于0
  const amount = parseFloat(value)
  if (isNaN(amount) || amount < 0) {
    return Promise.reject('请输入大于等于0的金额')
  }
  // 如果一切正常，返回成功
  return Promise.resolve()
}
const rules: Record<string, Rule[]> = {
  roleName: [{ required: true, message: '必填项', trigger: 'blur' }],
  limitPrice: [{ required: true, validator: validateChangeBalance, trigger: 'blur' }],
}

watch(
  () => ({ ...formState.value }),
  (newVal, oldVal) => {
    // console.log('newVal=', newVal)
  },
  { immediate: true, deep: true },
)

// 限制时间
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
import 'dayjs/locale/zh-cn'
import type { Dayjs } from 'dayjs'
type RangeValue = [Dayjs, Dayjs] | [string, string] | undefined
let startTime = ref<string>()
let endTime = ref<string>()
const changeTime = (e: RangeValue | [string, string], dataString: [string, string]) => {
  // console.log('e=', e)
  // console.log('dataString=', dataString)

  console.log('选择的日期=', dataString)
  startTime.value = dataString[0]
  endTime.value = dataString[1]
}

import type { SelectProps } from 'ant-design-vue'
// 所有select的模糊搜索
const filterOption = (input: string, option: any) => {
  return option.label.indexOf(input) >= 0
}

// 包含院线
const cinemaLineList = ref<SelectProps['options']>([])
const getCinemaLineList = async () => {
  try {
    const { state, data, message: msg } = await quotationRulesApi.getCinemaLineList()
    if (state === 200) {
      cinemaLineList.value = data.map((item: any) => {
        return {
          label: item.cinemaLineName,
          value: item.id,
        }
      })
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const lineArr = ref<Array<string>>([])
let okCinemaLine = ref<Array<any>>([])
const selectCinemaLine = (selectValue: any, option: any) => {
  okCinemaLine.value = selectValue
  lineArr.value = option
}

// 不包含院线
const lineArrNo = ref<Array<string>>([])
let okCinemaLineNo = ref<Array<any>>([])
const selectCinemaLineNo = (selectValue: any, option: any) => {
  okCinemaLineNo.value = selectValue
  lineArrNo.value = option
}

// 影片
const fileList = ref<SelectProps['options']>([])
const getFilmList = async (fileName: string) => {
  let params = { fileName }
  try {
    const { state, data, message: msg } = await quotationRulesApi.getFilmList(params)
    if (state === 200) {
      fileList.value = data.map((item: any) => {
        return {
          label: item.filmName,
          value: item.id,
        }
      })
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const fileArr = ref<Array<string>>([])
let okFile = ref<Array<any>>([])
const selectFile = (selectValue: any, option: any) => {
  okFile.value = selectValue
  fileArr.value = option
}

// 不包含影片
const fileArrNo = ref<Array<string>>([])
let okFileNo = ref<Array<any>>([])
const selectFileNo = (selectValue: any, option: any) => {
  okFileNo.value = selectValue
  fileArrNo.value = option
}

// 省份
const provinceList = ref<SelectProps['options']>([])
const getProvince = async () => {
  const params = { onOff: true }
  try {
    const { state, data, message: msg } = await quotationRulesApi.getProvinceList(params)
    if (state === 200) {
      provinceList.value = data.map((item: any) => {
        return {
          label: item.provinceName,
          value: item.provinceId,
        }
      })
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const provinceArr = ref<Array<any>>([{ label: '全国', value: '000000' }])
let okProvince = ref<Array<any>>(['000000'])
const selectProvince = (selectValue: any, option: any) => {
  okProvince.value = selectValue
  provinceArr.value = option
  // console.log('okProvince=', okProvince.value)
  // console.log('provinceArr=', provinceArr.value)
}

// 不包含省份
const provinceListNo = ref<SelectProps['options']>([])
const getProvinceNo = async () => {
  const params = { onOff: false }
  try {
    const { state, data, message: msg } = await quotationRulesApi.getProvinceList(params)
    if (state === 200) {
      provinceListNo.value = data.map((item: any) => {
        return {
          label: item.provinceName,
          value: item.provinceId,
        }
      })
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const provinceArrNo = ref<Array<string>>([])
let okProvinceNo = ref<Array<any>>([])
const selectProvinceNo = (selectValue: any, option: any) => {
  okProvinceNo.value = selectValue
  provinceArrNo.value = option
  // console.log('okProvinceNo=', okProvinceNo.value)
  // console.log('provinceArrNo=', provinceArrNo.value)
}

// 城市
const cityList = ref<SelectProps['options']>([])
const getCity = async () => {
  try {
    const { state, data, message: msg } = await quotationRulesApi.getCityList()
    if (state === 200) {
      cityList.value = data.map((item: any) => {
        return {
          label: item.cityName,
          value: item.id,
        }
      })
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const cityArr = ref<Array<string>>([])
let okCity = ref<Array<any>>([])
const selectCity = (selectValue: any, option: any) => {
  okCity.value = selectValue
  cityArr.value = option
}

// 不包含城市
const cityArrNo = ref<Array<string>>([])
let okCityNo = ref<Array<any>>([])
const selectCityNo = (selectValue: any, option: any) => {
  okCityNo.value = selectValue
  cityArrNo.value = option
}

// 座位数量
const seatOption = ref(['1张', '2张', '3张', '4张'])
const checkedList = ref<Array<any>>(['1张', '2张', '3张', '4张'])
let checkAll = ref<boolean>(true)
let indeterminate = ref<boolean>(false)
const onCheckAllChange = (e: any) => {
  // console.log('e=', e)
  checkedList.value = e.target.checked ? seatOption.value : []
  indeterminate.value = false
}
watch(
  () => checkedList.value,
  val => {
    indeterminate.value = !!val.length && val.length < seatOption.value.length
    checkAll.value = val.length === seatOption.value.length
    // console.log(checkedList.value)
  },
)

// 2/3D
const seatOption_23D = ref(['2D', '3D', '2/3D'])
const checkedList_23D = ref<Array<any>>(['2D', '3D', '2/3D'])
let checkAll_23D = ref<boolean>(true)
let indeterminate_23D = ref<boolean>(false)
const onCheckAllChange_23D = (e: any) => {
  // console.log('e=', e)
  checkedList_23D.value = e.target.checked ? seatOption_23D.value : []
  indeterminate_23D.value = false
}
watch(
  () => checkedList_23D.value,
  val => {
    indeterminate_23D.value = !!val.length && val.length < seatOption_23D.value.length
    checkAll_23D.value = val.length === seatOption_23D.value.length
    // console.log(checkedList.value)
  },
)

// 星期
const weekOption = ref(['周一', '周二', '周三', '周四', '周五', '周六', '周日'])
const checkedWeekList = ref<Array<any>>(['周一', '周二', '周三', '周四', '周五', '周六', '周日'])
let checkAllWeek = ref<boolean>(true)
let indeterminateWeek = ref<boolean>(false)
const onCheckAllChangeWeek = (e: any) => {
  // console.log('e=', e)
  checkedWeekList.value = e.target.checked ? weekOption.value : []
  indeterminateWeek.value = false
}
watch(
  () => checkedWeekList.value,
  val => {
    indeterminateWeek.value = !!val.length && val.length < weekOption.value.length
    checkAllWeek.value = val.length === weekOption.value.length
    // console.log(checkedWeekList.value)
  },
)

// 报价方式
let priceTypeIndex = ref<number | string>(1)
const prioceTypeList = reactive([
  {
    label: '比例',
    value: '1',
  },
  {
    label: '减法',
    value: '2',
  },
  {
    label: '固定金额',
    value: '3',
  },
  {
    label: '溢价',
    value: '4',
  },
])
const okPirceType = (index: number) => {
  priceTypeIndex.value = index
}

// 加减
let addSubIndex = ref<number>(0)
const addSubList = reactive([
  {
    label: '+',
    value: 0,
  },
  {
    label: '-',
    value: 1,
  },
])
let ruleRate = ref<string>('89')
let ruleSubtrahend = ref<string>('0')
const okAddSubType = (index: number) => {
  addSubIndex.value = index
}
// watch(ruleSubtrahend, (newVal, oldVal) => {
//   console.log('newVal=', newVal)
//   if (Number(newVal) < 0) {
//     okAddSubType(1)
//     console.log('addSubIndex=', addSubIndex.value)
//   } else {
//     okAddSubType(0)
//   }
// })

// 是否启用
let ruleStatus = ref<boolean>(true)
// 影院精准匹配开关
let cinemaNameType = ref<boolean>(true)
const changeRadio = (e: any) => {
  // console.log('e=', e)
  formState.value.cinemaNameType = e.target.value
}

// 提交
// 处理院线参数
const getLineArr = (list: Array<any> = [], type: number): Array<any> => {
  if (list.length > 0) {
    let arr = list.map((item: any) => {
      return {
        code: item.value,
        name: item.label,
        containStatus: type,
      }
    })
    return arr
  } else {
    return []
  }
}
// 处理影厅参数
const getHallArr = (arr: Array<any>, type: number): Array<any> => {
  return arr.map(item => {
    return {
      name: item,
      containStatus: type,
    }
  })
}
// 处理省份参数
const getProvinceArr = (list: Array<any> = [], type: number): Array<any> => {
  if (list.length > 0) {
    let arr = list.map((item: any) => {
      return {
        provId: item.value,
        provName: item.label,
        containStatus: type,
      }
    })
    return arr
  } else {
    return []
  }
}
// 处理城市参数
const getCityArr = (list: Array<any> = [], type: number): Array<any> => {
  if (list.length > 0) {
    let arr = list.map((item: any) => {
      return {
        id: item.value,
        cityName: item.label,
        containStatus: type,
      }
    })
    return arr
  } else {
    return []
  }
}
// 处理座位数
const getSeatCount = (list: Array<any>): string => {
  if (list.length == 4) {
    return '0'
  } else {
    let str = list.join(',').replace(/张/g, '')
    return str
  }
}

// 处理2/3D
const get23D = (list: Array<any>): string => {
  if (list.length == 3) {
    return '0'
  } else {
    console.log('list=', list)
    let str = ''
    list.map(item => {
      if (item == '2D') {
        str += '1'
      } else if (item == '3D') {
        str += ',2'
      } else if (item == '2/3D') {
        str += ',3'
      }
    })
    if (str.charAt(0) === ',') {
      str = str.slice(1)
    }
    return str
  }
}

// 处理星期
const convertChineseWeekdayToNumber = (weekday: any) => {
  const chineseWeekdays = {
    周一: 1,
    周二: 2,
    周三: 3,
    周四: 4,
    周五: 5,
    周六: 6,
    周日: 7,
  }
  // 检查输入的weekday是否在映射对象中
  if (chineseWeekdays.hasOwnProperty(weekday)) {
    return chineseWeekdays[weekday]
  } else {
    // 如果输入的weekday不在映射对象中，返回一个错误或默认值
    return '无效的星期几'
  }
}
const getWeekCount = (list: Array<any>): string => {
  if (list.length == 7) {
    return '0'
  } else {
    list = list.map(item => convertChineseWeekdayToNumber(item))
    console.log('list=', list)
    let str = list.join(',').replace(/周/g, '')
    return str
  }
}

// 处理最终报价调整类型
const finalPriceAdjustTypeList = ref<SelectProps['options']>([
  {
    label: '四舍五入到整数元',
    value: 1,
  },
  {
    label: '四舍五入到元-0.1',
    value: 2,
  },
  {
    label: '到0.5/整数元',
    value: 3,
  },
  {
    label: '不调整',
    value: 0,
  },
])

const handleSubmit = async () => {
  if (!formState.value.roleName) {
    message.error('报价规则名称必须填写~')

    return
  }
  // console.log('lineArr=', lineArr.value)
  // console.log('lineArrNo=', lineArrNo.value)
  // console.log('fileArr=', fileArr.value)
  // console.log('fileArrNo=', fileArrNo.value)
  // console.log('provinceArr=', provinceArr.value)
  // console.log('provinceArrNo=', provinceArrNo.value)
  // console.log('cityArr=', cityArr.value)
  // console.log('cityArrNo=', cityArrNo.value)
  // console.log('座位数量=', checkedList.value)
  // console.log('2/3D=', checkedList_23D.value)

  const params: { [propName: string]: any } = reactive({
    quotationLineDtoList: [], // 院线
    quotationFilmHallDtoList: [], // 影厅
    quotationCinemaDtoList: [], // 影院
    quotationFilmDtoList: [], // 影片
    quotationProvinceDTOList: [], // 省份
    quotationCityDTOList: [], // 城市
    quotationPlanTypeDTOList: [], // 2/3D - 新
  })

  formRef.value.validate().then(async () => {
    console.log('formState=', formState.value)

    //#region
    params.groupId = groupId.value
    // 规则名
    params.ruleName = formState.value.roleName
    // 院线
    params.quotationLineDtoList.push(...getLineArr(lineArr.value, 1))
    params.quotationLineDtoList.push(...getLineArr(lineArrNo.value, 0))
    // 影厅
    params.quotationFilmHallDtoList.push(...getHallArr(formState.value.fileHall, 1))
    params.quotationFilmHallDtoList.push(...getHallArr(formState.value.fileHallNo, 0))
    // 影院
    params.quotationCinemaDtoList.push(...getHallArr(formState.value.cinema, 1))
    params.quotationCinemaDtoList.push(...getHallArr(formState.value.cinemaNo, 0))
    // 影片
    params.quotationFilmDtoList.push(...getLineArr(fileArr.value, 1))
    params.quotationFilmDtoList.push(...getLineArr(fileArrNo.value, 0))
    // 省份
    params.quotationProvinceDTOList.push(...getProvinceArr(provinceArr.value, 1))
    params.quotationProvinceDTOList.push(...getProvinceArr(provinceArrNo.value, 0))
    // 城市
    params.quotationCityDTOList.push(...getCityArr(cityArr.value, 1))
    params.quotationCityDTOList.push(...getCityArr(cityArrNo.value, 0))
    // 放映日期
    params.beginLimitTime = timeStamp(startTime.value!)
    params.endLimitTime = timeStamp(endTime.value!)
    // 原价区间
    params.marketPriceBegin = regYuanToFen(formState.value.leftPrice, 100)
    params.marketPriceEnd = regYuanToFen(formState.value.rightPrice, 100)
    // 座位数量
    params.seatCount = getSeatCount(checkedList.value)

    // 2/3D
    // params.customFilmType = get23D(checkedList_23D.value)

    // 2/3D - 新
    params.quotationPlanTypeDTOList.push(...getHallArr(formState.value.type23D, 1))
    params.quotationPlanTypeDTOList.push(...getHallArr(formState.value.type23DNo, 0))

    // 星期
    params.week = getWeekCount(checkedWeekList.value)
    // 开始时间
    params.beginTime = formState.value.timeStart
    params.endTime = formState.value.timeEnd

    // 报价方式
    params.quotationType = priceTypeIndex.value
    // 报价方式
    if (priceTypeIndex.value == '1') {
      params.quotationPercent = ruleRate.value
    }
    if (priceTypeIndex.value == '2' || (priceTypeIndex.value == '1' && addSubIndex.value == 1)) {
      params.quotationDiscount = -regYuanToFen(Number(ruleSubtrahend.value), 100)
    } else {
      params.quotationDiscount = regYuanToFen(ruleSubtrahend.value, 100)
    }
    //报价方式判断
    if (priceTypeIndex.value == '2' || priceTypeIndex.value == '3' || priceTypeIndex.value == '4') {
      if (ruleSubtrahend.value <= 0) {
        message.error('报价金额不能为0~')
        return
      }
    }
    // 开关
    params.ruleStatus = 1
    params.cinemaNameType = formState.value.cinemaNameType
    //#endregion

    // 报价调整类型
    params.finalPriceAdjustType = formState.value.finalPriceAdjustType

    // 首选渠道
    params.matchChannel = matchChannel.value
    // 备选渠道
    params.slaveMatchChannel = alternativeChannel.value
    // 是否启用限价
    params.enableLimitPrice = isFixedPrice.value

    // 单张限价，加减
    if (limitAddSubIndex.value == 0) {
      params.limitPrice = formState.value.limitPrice
        ? -regYuanToFen(formState.value.limitPrice, 100)
        : 0
    } else {
      params.limitPrice = formState.value.limitPrice
        ? -regYuanToFen(formState.value.limitPrice, 100)
        : 0
    }

    console.log('params=', params)

    if (Object.keys(rowInfo.value).length > 0) {
      if (theType.value == 1) {
        params.channel = 1 // 1：微信、3：闲鱼
      } else if (theType.value == 3) {
        params.channel = 3
      }
      params.id = rowInfo.value.id
      try {
        const { state, message: msg } = await templateApi.editTemplateZyRule(params)
        if (state === 200) {
          myModal.value?.cancelModal()
          handleCancel()
          emit('refresh')
        } else {
          message.error(msg)
        }
      } catch (error) {
        message.error('网络请求连接失败~')
      }
    } else {
      if (theType.value == 1) {
        params.channel = 1 // 1：微信、3：闲鱼
      } else if (theType.value == 3) {
        params.channel = 3
      }
      try {
        const { state, message: msg } = await templateApi.addTemplateZyRule(params)
        if (state === 200) {
          handleCancel()
          emit('refresh')
        } else {
          message.error(msg)
        }
      } catch (error) {
        message.error('网络请求连接失败~')
      }
    }
  })
}

// 获取包含影厅
const getFileHall = (list: any) => {
  console.log('包含影厅=', list)
  formState.value.fileHall = list
}
// 获取不包含影厅
const getFileHallNo = (list: any) => {
  console.log('不包含影厅=', list)
  formState.value.fileHallNo = list
}
// 获取包含影院
const getCinema = (list: any) => {
  console.log('包含影院=', list)
  formState.value.cinema = list
}
// 获取包含影院
const getCinemaNo = (list: any) => {
  console.log('包含影院=', list)
  formState.value.cinemaNo = list
}
// 获取包含2/3D
const getType23D = (list: any) => {
  console.log('包含2/3D=', list)
  formState.value.type23D = list
}
// 获取不包含2/3D
const getType23DNo = (list: any) => {
  console.log('不包含2/3D=', list)
  formState.value.type23DNo = list
}

// 首选渠道
let matchChannel = ref<number | string>(6)
const channelList = ref<SelectProps['options']>([
  {
    label: '麻花电影票（可限价）',
    value: 3,
    able: false,
  },
  {
    label: '芒果电影票（一口价）',
    value: 5,
    able: false,
  },
  {
    // 星驰支持限价
    label: '星驰电影票（一口价）',
    value: 8,
    able: false,
  },
  {
    label: '哈哈电影票',
    value: 6,
    able: false,
  },
  {
    label: '守兔电影票（一口价）',
    value: 11,
    able: false,
  },
  {
    label: '守兔电影票（可限价）',
    value: 7,
    // able: true,
    able: false,
  },
  {
    label: '哈哈电影快票（固定9折）',
    value: 9,
    able: false,
  },
  {
    label: '影划算电影票（可限价）',
    value: 10,
    able: false,
  },
])
let fixedPriceFlag = ref<boolean>(false)
let isFixedPrice = ref<number>(1)
const selectChannel = (e: any) => {
  // console.log('首选渠道=', e)
  matchChannel.value = e
  if (e == 3 || e == 8 || e == 7 || e == 10) {
    fixedPriceFlag.value = true
  } else {
    fixedPriceFlag.value = false
  }
  alternativeChannelList.value?.forEach(item => {
    item.able = false
    if (item.value == e) {
      item.able = true
    }
    // if (item.value == 7) {
    //   item.able = true
    // }
  })
  // channelList.value?.forEach(item => {
  //   if (item.value == 7) {
  //     item.able = true
  //   }
  // })
}

// 备选渠道 - 新
let alternativeChannel = ref<number | string>(3)
let fixedPriceFlag_2 = ref<boolean>(true)
const alternativeChannelList = ref<SelectProps['options']>([
  {
    label: '不使用',
    value: 0,
    able: false,
  },
  {
    label: '麻花电影票（可限价）',
    value: 3,
    able: false,
  },
  {
    label: '芒果电影票（一口价）',
    value: 5,
    able: false,
  },
  {
    label: '星驰电影票（一口价）',
    value: 8,
    able: false,
  },
  {
    label: '哈哈电影票',
    value: 6,
    able: false,
  },
  {
    label: '守兔电影票（一口价）',
    value: 11,
    able: false,
  },
  {
    label: '守兔电影票（可限价）',
    value: 7,
    // able: true,
    able: false,
  },
  {
    label: '哈哈电影快票（固定9折）',
    value: 9,
    able: false,
  },
  {
    label: '影划算电影票（可限价）',
    value: 10,
    able: false,
  },
])
const selectAlternativeChannel = (e: any) => {
  // console.log('备选渠道=', e)
  alternativeChannel.value = e
  if (e == 3 || e == 8 || e == 7 || e == 10) {
    fixedPriceFlag_2.value = true
  } else {
    fixedPriceFlag_2.value = false
  }
  channelList.value?.forEach(item => {
    item.able = false
    if (item.value == e) {
      item.able = true
    }
    // if (item.value == 7) {
    //   item.able = true
    // }
  })
  // alternativeChannelList.value?.forEach(item => {
  //   if (item.value == 7) {
  //     item.able = true
  //   }
  // })
}

// 限价 - 加减符号
let limitAddSubIndex = ref<number>(0)
const limitAddSubList = reactive([
  {
    label: '+',
    value: 0,
  },
  {
    label: '-',
    value: 1,
  },
])
const limitOkAddSubType = (index: number) => {
  limitAddSubIndex.value = index
}
</script>

<template>
  <MyModal ref="myModal" :title="title" :width="1100">
    <template #content>
      <a-form
        ref="formRef"
        style="display: flex; height: 800px"
        :label-col="labelCol"
        :model="formState"
        :rules="rules"
      >
        <div style="width: 480px; overflow-y: scroll">
          <a-form-item label="包含院线">
            <a-select
              placeholder="请选择包含的院线"
              mode="multiple"
              show-search
              :options="cinemaLineList"
              :filter-option="filterOption"
              v-model:value="lineArr"
              @change="selectCinemaLine"
            >
              <a-select-option
                v-for="(item, index) in cinemaLineList"
                :key="index"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="排除院线">
            <a-select
              placeholder="请选择不包含的院线"
              mode="multiple"
              show-search
              :options="cinemaLineList"
              :filter-option="filterOption"
              v-model:value="lineArrNo"
              @change="selectCinemaLineNo"
            >
              <a-select-option
                v-for="(item, index) in cinemaLineList"
                :key="index"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="包含省份">
            <a-select
              placeholder="请选择包含的省份"
              mode="multiple"
              show-search
              :options="provinceList"
              :filter-option="filterOption"
              v-model:value="provinceArr"
              @change="selectProvince"
            >
              <a-select-option
                v-for="(item, index) in provinceList"
                :key="index"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="排除省份">
            <a-select
              placeholder="请选择不包含的省份"
              mode="multiple"
              show-search
              :options="provinceListNo"
              :filter-option="filterOption"
              v-model:value="provinceArrNo"
              @change="selectProvinceNo"
            >
              <a-select-option
                v-for="(item, index) in provinceListNo"
                :key="index"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="包含城市">
            <a-select
              placeholder="请选择包含的城市"
              mode="multiple"
              show-search
              :options="cityList"
              :filter-option="filterOption"
              v-model:value="cityArr"
              @change="selectCity"
            >
              <a-select-option v-for="(item, index) in cityList" :key="index" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="排除城市">
            <a-select
              placeholder="请选择不包含的城市"
              mode="multiple"
              show-search
              :options="cityList"
              :filter-option="filterOption"
              v-model:value="cityArrNo"
              @change="selectCityNo"
            >
              <a-select-option v-for="(item, index) in cityList" :key="index" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item name="cinema" label="包含影院">
            <!-- <a-input placeholder="可以是空的" v-model:value="formState.cinema"></a-input> -->
            <MarkList
              @okList="getCinema"
              v-if="formState.cinema.length > 0"
              :list="formState.cinema"
            ></MarkList>
            <MarkList @okList="getCinema" v-else :list="formState.cinema"></MarkList>
          </a-form-item>

          <a-form-item name="cinemaNo" label="排除影院">
            <!-- <a-input placeholder="可以是空的" v-model:value="formState.cinemaNo"></a-input> -->
            <MarkList
              @okList="getCinemaNo"
              v-if="formState.cinemaNo.length > 0"
              :list="formState.cinemaNo"
            ></MarkList>
            <MarkList @okList="getCinemaNo" v-else :list="formState.cinemaNo"></MarkList>
          </a-form-item>

          <a-form-item label="包含影厅">
            <!-- <a-input placeholder="可以是空的" v-model:value="formState.fileHall"></a-input> -->
            <MarkList
              @okList="getFileHall"
              v-if="formState.fileHall.length > 0"
              :list="formState.fileHall"
            ></MarkList>
            <MarkList @okList="getFileHall" v-else :list="formState.fileHall"></MarkList>
          </a-form-item>

          <a-form-item name="fileHallNo" label="排除影厅" style="margin-top: -5px">
            <!-- <a-input placeholder="可以是空的" v-model:value="formState.fileHallNo"></a-input> -->
            <MarkList
              @okList="getFileHallNo"
              v-if="formState.fileHallNo.length > 0"
              :list="formState.fileHallNo"
            ></MarkList>
            <MarkList @okList="getFileHallNo" v-else :list="formState.fileHallNo"></MarkList>
          </a-form-item>

          <a-form-item label="包含影片">
            <a-select
              placeholder="请选择包含的影片"
              mode="multiple"
              show-search
              :options="fileList"
              :filter-option="filterOption"
              v-model:value="fileArr"
              @change="selectFile"
            >
              <a-select-option v-for="(item, index) in fileList" :key="index" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="排除影片">
            <a-select
              placeholder="请选择不包含的影片"
              mode="multiple"
              show-search
              :options="fileList"
              :filter-option="filterOption"
              v-model:value="fileArrNo"
              @change="selectFileNo"
            >
              <a-select-option v-for="(item, index) in fileList" :key="index" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="包含影片类型">
            <MarkList
              @okList="getType23D"
              v-if="formState.type23D.length > 0"
              :list="formState.type23D"
            ></MarkList>
            <MarkList @okList="getType23D" v-else :list="formState.type23D"></MarkList>
          </a-form-item>

          <a-form-item name="fileHallNo" label="排除影片类型" style="margin-top: -5px">
            <MarkList
              @okList="getType23DNo"
              v-if="formState.type23DNo.length > 0"
              :list="formState.type23DNo"
            ></MarkList>
            <MarkList @okList="getType23DNo" v-else :list="formState.type23DNo"></MarkList>
          </a-form-item>
        </div>

        <div style="flex: 1; margin-left: 20px; overflow-y: scroll">
          <a-form-item label="猫淘价" help="例：设置0-50，判断方式为：0≤ 原价 ＜50">
            <div style="display: flex; align-items: center">
              <a-input
                style="width: 170px"
                v-model:value="formState.leftPrice"
                placeholder="原价左区间"
              />
              <div style="padding: 0 5px">—</div>
              <a-input
                style="width: 155px"
                v-model:value="formState.rightPrice"
                placeholder="原价右区间"
              />
            </div>
          </a-form-item>

          <a-form-item
            label="放映日期"
            help="不选择，则不限制"
            style="position: relative; bottom: 16px"
          >
            <a-range-picker
              style="width: 350px"
              :placeholder="['开始日期', '结束日期']"
              :locale="locale"
              v-model:value="formState.showTime"
              @change="changeTime"
            />
          </a-form-item>

          <div style="display: flex; position: relative; bottom: 22px">
            <a-form-item label="开始时间" name="timeStart">
              <a-time-picker
                placeholder="选择时间"
                style="width: 120px"
                valueFormat="HH:mm:ss"
                v-model:value="formState.timeStart"
              />
            </a-form-item>
            <a-form-item label="结束时间" name="timeEnd">
              <a-time-picker
                placeholder="选择时间"
                style="width: 120px"
                valueFormat="HH:mm:ss"
                v-model:value="formState.timeEnd"
              />
            </a-form-item>
          </div>

          <!-- <a-form-item label="2/3D" style="position: relative; bottom: 8px">
            <a-checkbox
              v-model:checked="checkAll_23D"
              :indeterminate="indeterminate_23D"
              @change="onCheckAllChange_23D"
            >
              全部
            </a-checkbox>
            <a-checkbox-group v-model:value="checkedList_23D" :options="seatOption_23D" />
          </a-form-item> -->

          <a-form-item label="票数" style="position: relative; bottom: 28px">
            <a-checkbox
              v-model:checked="checkAll"
              :indeterminate="indeterminate"
              @change="onCheckAllChange"
            >
              全部
            </a-checkbox>
            <a-checkbox-group v-model:value="checkedList" :options="seatOption" />
          </a-form-item>

          <a-form-item label="星期" style="position: relative; bottom: 42px">
            <a-checkbox
              v-model:checked="checkAllWeek"
              :indeterminate="indeterminateWeek"
              @change="onCheckAllChangeWeek"
            >
              全部
            </a-checkbox>
            <a-checkbox-group v-model:value="checkedWeekList" :options="weekOption" />
          </a-form-item>

          <a-form-item label="报价方式" style="position: relative; bottom: 50px">
            <a-radio-group v-model:value="priceTypeIndex">
              <a-radio @click="okPirceType(1)" :value="1">比例加减</a-radio>
              <a-radio @click="okPirceType(2)" :value="2">猫淘价减法</a-radio>
              <a-radio @click="okPirceType(3)" :value="3">固定金额</a-radio>
              <a-radio @click="okPirceType(4)" :value="4">溢价模式</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item label="报价金额" style="position: relative; bottom: 58px">
            <div v-if="priceTypeIndex == 1" class="priceType_1">
              <a-input v-model:value="ruleRate" placeholder="猫淘价x" class="ipt_Height">
                <template #suffix>%</template>
              </a-input>

              <div style="position: relative; margin: 0 5px">
                <div
                  style="width: 20px; text-align: center; cursor: pointer"
                  :class="{
                    active: addSubIndex === 0 && index === addSubIndex,
                    'active-red': addSubIndex === 1 && index === addSubIndex,
                  }"
                  v-for="(item, index) in addSubList"
                  :key="index"
                  @click="okAddSubType(index)"
                >
                  <span>
                    {{ item.label }}
                  </span>
                </div>
              </div>

              <a-input v-model:value="ruleSubtrahend" class="ipt_Height">
                <template #suffix>元</template>
              </a-input>
            </div>

            <div v-if="priceTypeIndex == 2">
              <span style="margin-right: 10px">【猫淘价】-</span>
              <a-input v-model:value="ruleSubtrahend" style="width: 120px">
                <template #suffix>元</template>
              </a-input>
            </div>

            <div v-if="priceTypeIndex == 3">
              <a-input v-model:value="ruleSubtrahend" style="width: 120px">
                <template #suffix>元</template>
              </a-input>
            </div>

            <div v-if="priceTypeIndex == 4">
              <a-input v-model:value="ruleSubtrahend" style="width: 120px">
                <template #suffix>元</template>
              </a-input>
              <span style="margin-left: 10px">+【溢价部分】</span>
            </div>
          </a-form-item>

          <a-form-item name="limitPrice" label="单张限价" style="position: relative; bottom: 70px">
            <div style="display: flex">
              <a-input
                v-model:value="formState.limitPrice"
                placeholder=""
                style="width: 320px; height: 32px"
              >
                <template #addonBefore>
                  【单张报价】
                  <span style="color: red; margin-left: 5px">+</span>
                </template>
                <template #suffix>元</template>
              </a-input>
            </div>
          </a-form-item>

          <div style="display: flex; position: relative; bottom: 80px">
            <!-- <a-form-item name="ruleStatus" label="是否启用">
              <a-switch v-model:checked="formState.ruleStatus" />
            </a-form-item> -->

            <!-- <a-form-item name="cinemaNameType" label="影院精准匹配" style="margin-left: 10px">
              <a-switch v-model:checked="formState.cinemaNameType" />
            </a-form-item> -->

            <a-form-item name="cinemaNameType" label="影院精准匹配" style="margin-left: 0px">
              <a-radio-group v-model:value="formState.cinemaNameType" @change="changeRadio">
                <a-radio :value="1">精准匹配</a-radio>
                <a-radio :value="2">包含匹配</a-radio>
              </a-radio-group>
            </a-form-item>
          </div>

          <a-form-item name="finalPriceAdjustType" style="position: relative; bottom: 90px">
            <template #label>
              <span style="margin-left: 15px">报价调整类型</span>
            </template>
            <a-select
              v-model:value="formState.finalPriceAdjustType"
              placeholder="请选择"
              style="width: 170px"
            >
              <a-select-option
                v-for="(item, index) in finalPriceAdjustTypeList"
                :key="index"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <!--  -->
          <a-form-item
            name="matchChannel"
            label="首选供应渠道"
            style="position: relative; bottom: 90px"
          >
            <template #help>
              <span v-if="matchChannel == 3" style="color: #bfbfbf">
                <!-- 麻花 -->
                支持限价，你的出票成本=供应商中标价+供应商中标价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费
              </span>
              <span v-if="matchChannel == 10" style="color: #bfbfbf">
                <!-- 影划算 -->
                支持限价，你的出票成本=供应商中标价+供应商中标价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费
              </span>
              <span v-else-if="matchChannel == 5" style="color: #bfbfbf">
                <!-- 芒果 -->
                出票成本=预估出票价
              </span>
              <span v-else-if="matchChannel == 7" style="color: #bfbfbf">
                <!-- 守兔 -->
                支持限价，你的出票成本=供应商中标价+供应商中标价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费
              </span>
              <span v-else-if="matchChannel == 11" style="color: #bfbfbf">
                <!-- 守兔一口价 -->
                你的出票成本=预估出票价
              </span>
              <span v-else-if="matchChannel == 9" style="color: #bfbfbf">
                <!-- 哈哈快票 -->
                你的出票成本=猫淘价（原价）*90%
              </span>
              <span v-else-if="matchChannel == 6" style="color: #bfbfbf">
                <!-- 哈哈电影票 -->
                不支持限价，你的出票成本=供应商中标价+原价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费
              </span>
              <span v-else-if="matchChannel == 8" style="color: #bfbfbf">
                <!-- 星驰 -->
                你的出票成本=预估出票价
              </span>
            </template>
            <a-select
              v-model:value="matchChannel"
              placeholder="请选择"
              @change="selectChannel"
              style="width: 300px"
              allowClear
            >
              <a-select-option
                v-for="(item, index) in channelList"
                :key="index"
                :value="item.value"
                :disabled="item.able"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item
            name="alternativeChannel"
            label="备选供应渠道"
            style="position: relative; bottom: 90px"
          >
            <template #help>
              <span v-if="alternativeChannel == 3" style="color: #bfbfbf">
                <!-- 麻花 -->
                支持限价，你的出票成本=供应商中标价+供应商中标价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费
              </span>
              <span v-if="alternativeChannel == 10" style="color: #bfbfbf">
                <!-- 影划算 -->
                支持限价，你的出票成本=供应商中标价+供应商中标价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费
              </span>
              <span v-else-if="alternativeChannel == 5" style="color: #bfbfbf">
                <!-- 芒果 -->
                出票成本=预估出票价
              </span>
              <span v-else-if="alternativeChannel == 7" style="color: #bfbfbf">
                <!-- 守兔 -->
                支持限价，你的出票成本=供应商中标价+供应商中标价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费
              </span>
              <span v-else-if="alternativeChannel == 11" style="color: #bfbfbf">
                <!-- 守兔一口价 -->
                你的出票成本=预估出票价
              </span>
              <span v-else-if="alternativeChannel == 9" style="color: #bfbfbf">
                <!-- 哈哈快票 -->
                你的出票成本=猫淘价（原价）*90%
              </span>
              <span v-else-if="alternativeChannel == 6" style="color: #bfbfbf">
                <!-- 哈哈电影票 -->
                不支持限价，你的出票成本=供应商中标价+原价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费
              </span>
              <span v-else-if="alternativeChannel == 8" style="color: #bfbfbf">
                <!-- 星驰 -->
                你的出票成本=预估出票价
              </span>
            </template>
            <a-select
              v-model:value="alternativeChannel"
              placeholder="请选择"
              @change="selectAlternativeChannel"
              style="width: 300px"
              allowClear
            >
              <a-select-option
                v-for="(item, index) in alternativeChannelList"
                :key="index"
                :value="item.value"
                :disabled="item.able"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item
            name="isFixedPrice"
            style="position: relative; bottom: 90px"
            v-if="fixedPriceFlag || fixedPriceFlag_2"
          >
            <div style="display: inline-block">是否限价(主/备)：</div>
            <a-radio-group v-model:value="isFixedPrice" style="margin-top: 5px">
              <a-radio :value="1">启用限价</a-radio>
              <a-radio :value="0">不启用限价</a-radio>
            </a-radio-group>
          </a-form-item>
          <!--  -->

          <a-form-item name="roleName" label="规则名称" style="position: relative; bottom: 90px">
            <a-input
              placeholder="规则名称"
              style="width: 320px"
              v-model:value="formState.roleName"
            ></a-input>
          </a-form-item>
        </div>
      </a-form>

      <div
        style="
          text-align: right;
          margin-top: 10px;
          border-top: 1px solid #f0f0f0;
          padding-top: 10px;
        "
      >
        <a-button style="margin-right: 5px" @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleSubmit">确定</a-button>
      </div>
    </template>
  </MyModal>
</template>

<style lang="less" scoped>
input {
  width: 320px;
}

/deep/ .ant-select-selector {
  width: 320px;
}

.ipt-div {
  border: 1px solid #d9d9d9;
  min-height: 32px;
  width: 320px;
  border-radius: 6px;
  padding: 0 3px;
}

.ipt-tag {
  margin: 3px;
  font-size: 14px;
  padding: 0 4px 0 8px;
  border: 0;
  background: #f5f5f5;
  cursor: pointer;
  height: 24px;
  line-height: 24px;
}

.ipt-tag-del {
  font-size: 12px;
  line-height: 24px;
  color: #878787;
  margin-left: 5px;
}

.priceType {
  margin-top: 2px;
  height: 25px;
  line-height: 25px;
  padding: 0 5px;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 20px;
}

.active {
  background: #1890ff;
  color: #fff;
}

.active-red {
  background: red;
  color: #fff;
}

.smallDiv {
  height: 30px;
  width: 40px;
  padding: 3px 5px;
}

.priceType_1 {
  display: flex;

  .ipt_Height {
    height: 32px;
    width: 155px;
  }
}
</style>
